<!--HOTSCAN检查详情-->
<template>
  <el-dialog
    :title="title"
    center
    :visible.sync="openState"
    width="1024px"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <!-- 交易基础信息 -->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>交易基础信息</span>
        </div>

        <el-row>
          <el-col :span="12">
            <el-form-item label="检索编号(TRN)" prop="checkId">
              <el-input v-model="formData.checkId" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="系统编号" prop="bepsId">
              <el-input v-model="formData.bepsId" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="业务编号" prop="businessId">
              <el-input v-model="formData.businessId" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务种类" prop="businessKind">
              <el-select v-model="formData.businessKind" disabled>
                <el-option label="T-kindSET" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="币种" prop="amonut">
              <el-input v-model="formData.amonut" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金额" prop="money">
              <el-input v-model="formData.money" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="交易日期" prop="workDate">
              <el-date-picker
                v-model="formData.workDate"
                type="date"
                value-format="yyyyMMdd"
                placeholder=""
                disabled
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="form-card payerInfo-card">
        <div slot="header" class="label-header-msg">
          <span>收款人信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收款人名称" prop="payeeName">
              <el-input v-model="formData.payeeName" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="收款银行" prop="payeeBank">
              <el-input v-model="formData.payeeBank" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="收款人账户" prop="payeeAmount">
              <el-input v-model="formData.payeeAmount" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="收款人地址" prop="payeeAddress">
              <el-input v-model="formData.payeeAddress" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="form-card payerInfo-card">
        <div slot="header" class="label-header-msg">
          <span>付款人信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收款人名称" prop="payerName">
              <el-input v-model="formData.payerName" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="付款银行" prop="payerBank">
              <el-input v-model="formData.payerBank" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="付款人账户" prop="payerAmount">
              <el-input v-model="formData.payerAmount" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="付款人地址" prop="payerAddress">
              <el-input v-model="formData.payerAddress" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="form-card payerInfo-card">
        <div slot="header" class="label-header-msg">
          <span>HOTSCAN信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="HOTSCAN检查结果" label-width="150px" prop="hotScanResult">
              <el-input v-model="formData.hotScanResult" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="HOTSCAN时间" label-width="150px" prop="hotScanTime">
              <el-input v-model="formData.hotScanTime" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="form-card payerInfo-card">
        <div slot="header" class="label-header-msg">
          <span>其他信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="中转行1" prop="medBank1">
              <el-input v-model="formData.medBank1" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="中转行2" prop="medBank2">
              <el-input v-model="formData.medBank2" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="附言" prop="remark">
              <el-input type="textarea" v-model="formData.remark" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>

    <el-row slot="footer">
      <el-col :span="2" :offset="11">
        <el-button @click="close">关闭</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  name: "hotScanDetailQry",
  data() {
    return {
      title: "",
      openState: false, // 是否显示弹出层
      form: {},
      formData: {
        bepsId: "13246231245245354", // 系统编号
        money: "999,99", // 金额
        workDate: "2023-12-11", // 交易日期
        businessKind: "1", // 业务种类
        checkId: "345631244635531212351", // 检索编号(TRN)
        businessId: "3153125463463246", // 业务编号
        amonut: "CNY", // 币种
        hotScanResult: "AP", // HOTSCAN检查结果
        hotScanTime: "2023-12-12", // hotScan时间

        payeeName: "张三", // 收款人名称
        payeeBank: "中国工商银行", // 收款银行
        payeeAmount: "1324236546234623421", // 收款人账户
        payeeAddress: "浦东新区", // 收款人地址

        payerName: "李四", // 付款人名称
        payerBank: "中国银行", // 付款银行
        payerAmount: "4512355623462451235", // 付款人账户
        payerAddress: "北京朝阳路", // 付款人地址

        medBank1: "中国农业银行", // 中转行1
        medBank2: "中国建设银行", // 中转行2
        remark: "附言", // 附言

        discountCounterparties: "中国农建", // 贴现贸易对手方
        acceptorName: "上海交通银行", // 承兑人全称
        discountApplicant: "王五", // 贴现申请人
      },
      rules: {},
    };
  },

  methods: {
    handleClose() {
      this.openState = false;
    },

    show() {
      this.title = "HOTSCAN检查详情";
      this.openState = true;
    },

    // 关闭
    close() {
      console.log("关闭");
      this.openState = false;
    },
  },
};
</script>

<style scoped>
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #000000 !important;
}
.menu-tool-btn {
  width: 24px;
  height: 24px;
}

.menu-tree {
  height: 5%;
  margin-top: -5px;
  margin-left: 92%;
  font-size: 28px;
}
.block {
  float: right;
  margin-top: 10px;
}
</style>
